<template>
    <div>
        <el-drawer v-model="messageaudit" :title="props.itemDetail.companyName ?? '' + '充值付费审核'" direction="rtl"
            :size="isMobile ? '100%' : '576'">
            <div class="cursor-pointer position-fixed top-50px right-576px flex flex-col items-center justify-center w-28px h-59px bg-#0256ff text-14px text-#ffffff"
                @click="onBullHideout">
                <span>收</span><span>起</span><img class="mt-5px" src="../../../assets/image/组355.png" alt="" />
            </div>
            <el-form ref="messageruleFormRef" :model="messageruleForm" :rules="messagerules" label-width="120px"
                class="demo-ruleForm" status-icon label-position="top">
                <el-form-item label="服务金额" prop="price">
                    <el-input disabled v-model="messageruleForm.price" />
                </el-form-item>
                <el-form-item label="付款方式" prop="paymode">
                    <el-select v-model="messageruleForm.paymode" placeholder="请选择付款方式">
                        <el-option v-for="item in paytypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="收款账户" prop="receptid">
                    <el-select v-model="messageruleForm.receptid" placeholder="请选择收款账户">
                        <el-option v-for="item in adminrechargetype" :key="item.receiptId" :label="item.bankName"
                            :value="item.receiptId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上传凭证">
                    <el-image style="width: 100px; height: 100px" crossorigin="anonymous" :src="messageruleForm.img"
                        :zoom-rate="1.2" :preview-src-list="[messageruleForm.img]" :initial-index="0" fit="cover" />
                </el-form-item>
                <el-form-item label="备注" prop="desc">
                    <el-input v-model="messageruleForm.remak" maxlength="50" show-word-limit type="textarea"
                        placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="flex items-center justify-center">
                    <el-button class="text-#eb3435" @click="messagereject('message')">驳回</el-button>
                    <el-button type="primary" class=" bg-#0256ff"
                        @click="messagesubmitForm(messageruleFormRef)">通过</el-button>
                </div>
            </template>
        </el-drawer>
        <dialogRechargeReject v-model:show="showReject" :type="rejectType" :detail="messageruleForm"
            @success="onRejectSuccess">
        </dialogRechargeReject>
    </div>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import { getadminrechargeapi, getmessageauditapi } from '@/api/api'
import dialogRechargeReject from './dialog-recharge-reject.vue'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    itemDetail: {
        type: Object,
        default() {
            return {}
        }
    }
})
const isMobile = ref((window as any).isMobile)
const showReject = ref(false)
const emits = defineEmits(['update:show', 'success'])
const messageruleFormRef = ref<FormInstance>()
const messageaudit = ref(false)
const adminrechargetype = ref<any>([])
const paytypes = ref([
    {
        value: 1,
        label: '公对公'
    },
    {
        value: 2,
        label: '微信'
    },
    {
        value: 3,
        label: '私对公'
    },
    {
        value: 4,
        label: '赠送'
    }
])

const messageruleForm = reactive({
    id: 0,
    companyId: 0,
    remak: '',
    receptid: '',
    paymode: '',
    price: '',
    img: ''
})
const rejectType = ref('')
const messagerules = reactive<FormRules>({
    paymode: [
        {
            required: true,
            message: '请选择付款方式',
            trigger: 'change'
        }
    ],
    receptid: [
        {
            required: true,
            message: '请选择收款账户',
            trigger: 'change'
        }
    ]
})
const onBullHideout = () => {
    messageaudit.value = false
}
// 获取充值账户
const getadminrecharge = (companyId: string | number) => {
    getadminrechargeapi(companyId).then((res: any) => {
        adminrechargetype.value = res
        let id = ''
        res.forEach((ele: any,) => {
            if (ele.isDistribution === 1) {
                id = ele.receiptId
            }
        })
        messageruleForm.receptid = id
    })
}
const messageresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const messagereject = (val: string) => {
    showReject.value = true
    rejectType.value = val
}
const onRejectSuccess = () => {
    messageaudit.value = false
    messageresetForm(messageruleFormRef.value)
    emits('success')
}
const messagesubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            getmessageauditapi({
                operateFlag: 1,
                receiptId: messageruleForm.receptid,
                payMode: messageruleForm.paymode,
                remark: messageruleForm.remak??'',
                companyId: messageruleForm.companyId,
                id: messageruleForm.id
            }).then(() => {
                messageaudit.value = false
                messageresetForm(messageruleFormRef.value)
                emits('success')
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
watch(() => props.show, (newval) => {
    messageaudit.value = newval
    if (newval) {
        getadminrecharge(props.itemDetail.companyId)
        messageresetForm(messageruleFormRef.value)
        messageruleForm.img = props.itemDetail.voucherUrl
        messageruleForm.price = props.itemDetail.payMoney
        messageruleForm.id = props.itemDetail.id
        messageruleForm.remak = props.itemDetail.remark
        messageruleForm.companyId = props.itemDetail.companyId
        messageruleForm.paymode = props.itemDetail.payMode
    }
})

watch(messageaudit, (newval) => {
    emits('update:show', newval)
})
</script>

<style scoped lang="scss"></style>